<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta name="apple-mobile-web-app-status-bar-style" content="blank">
  <meta content="telephone=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>天瑞商城</title>
  <link rel="stylesheet" href="./css/mreset.css">
  <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="./css/main.css">
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/swiper-3.4.2.min.js"></script>
</head>
<body ontouchstart>
  <div class="wap">
    <ul class="mx-tab">
      <li class="active">余额</li>
      <li>积分</li>
    </ul>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <ul>
            <li>
              <div>
                <p>支付宝(4553)
                  <span>[充值]</span>  <!--体现 购物 返现-->
                </p>
                <span class="red">+100</span>
              </div>
              <div>
                <span>2018年04月08日</span>
                <span>交易时余额：156</span>
              </div>
            </li>
            <li>
              <div>
                <p>支付宝(4553)
                  <span>[充值]</span>  <!--体现 购物 返现-->
                </p>
                <span class="red">+100</span>
              </div>
              <div>
                <span>2018年04月08日</span>
                <span>交易时余额：156</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="swiper-slide">
          <ul>
            <li>
              <div>
                <p>竞猜
                  <span class="zw"></span>
                </p>
                <span class="red">+100</span>
              </div>
              <div>
                <span>2018年04月08日</span>
                <span>交易时余额：156</span>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>

  </div>
  <script>
    $(function(){
      var mySwiper = new Swiper('.swiper-container', {
        onTransitionEnd: function(swiper){
          $('.mx-tab li').eq(mySwiper.activeIndex).addClass('active').siblings().removeClass('active');
        }
      })
      $('.mx-tab li').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        mySwiper.slideTo($(this).index(), 1000)
      });
    })
  </script>
</body>
</html>